iconGrid/iconGridLayout: Add support for page-padding

This is a new property to control the padding around each page,
as opposed to the padding around the entire container.

Following the original design of IconGridLayout [1], changing
the page-padding property doesn't trigger relayouts; the container
is responsible for queueing a relayout appropriately.

[1] 3555550d5ec5406344ff9a0a3928624dc5679c20

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1510>

diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index bc59b1bb08ae7ba541dec0f0617471ce48093c62..4095299504bac76bdab689a30c2470a2e02743d2 100644 (file)
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -299,6 +299,10 @@ var IconGridLayout = GObject.registerClass({
             GObject.ParamFlags.READWRITE,
             Clutter.ActorAlign.$gtype,
             Clutter.ActorAlign.FILL),
+        'page-padding': GObject.ParamSpec.boxed('page-padding',
+            'Page padding', 'Page padding',
+            GObject.ParamFlags.READWRITE,
+            Clutter.Margin.$gtype),
         'page-valign': GObject.ParamSpec.enum('page-valign',
             'Vertical page align',
             'Vertical page align',
@@ -329,6 +333,7 @@ var IconGridLayout = GObject.registerClass({
             max_row_spacing: -1,
             orientation: Clutter.Orientation.VERTICAL,
             page_halign: Clutter.ActorAlign.FILL,
+            page_padding: new Clutter.Margin(),
             page_valign: Clutter.ActorAlign.FILL,
             row_spacing: 0,
             rows_per_page: 4,
@@ -343,6 +348,7 @@ var IconGridLayout = GObject.registerClass({
         this._maxRowSpacing = params.max_row_spacing;
         this._orientation = params.orientation;
         this._pageHAlign = params.page_halign;
+        this._pagePadding = params.page_padding;
         this._pageVAlign = params.page_valign;
         this._rowSpacing = params.row_spacing;
         this._rowsPerPage = params.rows_per_page;
@@ -417,9 +423,11 @@ var IconGridLayout = GObject.registerClass({
             }
 
             const emptyHSpace =
-                this._pageWidth - usedWidth - columnSpacingPerPage;
+                this._pageWidth - usedWidth - columnSpacingPerPage -
+                this._pagePadding.left - this._pagePadding.right;
             const emptyVSpace =
-                this._pageHeight - usedHeight -  rowSpacingPerPage;
+                this._pageHeight - usedHeight -  rowSpacingPerPage -
+                this._pagePadding.top - this._pagePadding.bottom;
 
             if (emptyHSpace >= 0 && emptyVSpace > 0) {
                 bestSize = size;
@@ -590,28 +598,30 @@ var IconGridLayout = GObject.registerClass({
         const columnSpacingPerPage = this._columnSpacing * (nColumns - 1);
         const rowSpacingPerPage = this._rowSpacing * (nRows - 1);
 
-        let emptyHSpace = this._pageWidth - usedWidth - columnSpacingPerPage;
-        let emptyVSpace = this._pageHeight - usedHeight -  rowSpacingPerPage;
-        let leftEmptySpace;
-        let topEmptySpace;
+        const emptyHSpace =
+            this._pageWidth - usedWidth - columnSpacingPerPage -
+            this._pagePadding.left - this._pagePadding.right;
+        const emptyVSpace =
+            this._pageHeight - usedHeight -  rowSpacingPerPage -
+            this._pagePadding.top - this._pagePadding.bottom;
+        let leftEmptySpace = this._pagePadding.left;
+        let topEmptySpace = this._pagePadding.top;
         let hSpacing;
         let vSpacing;
 
         switch (this._pageHAlign) {
         case Clutter.ActorAlign.START:
-            leftEmptySpace = 0;
             hSpacing = this._columnSpacing;
             break;
         case Clutter.ActorAlign.CENTER:
-            leftEmptySpace = Math.floor(emptyHSpace / 2);
+            leftEmptySpace += Math.floor(emptyHSpace / 2);
             hSpacing = this._columnSpacing;
             break;
         case Clutter.ActorAlign.END:
-            leftEmptySpace = emptyHSpace;
+            leftEmptySpace += emptyHSpace;
             hSpacing = this._columnSpacing;
             break;
         case Clutter.ActorAlign.FILL:
-            leftEmptySpace = 0;
             hSpacing = this._columnSpacing + emptyHSpace / (nColumns - 1);
 
             // Maybe constraint horizontal spacing
@@ -620,7 +630,7 @@ var IconGridLayout = GObject.registerClass({
                     (this._maxColumnSpacing - this._columnSpacing) * (nColumns - 1);
 
                 hSpacing = this._maxColumnSpacing;
-                leftEmptySpace =
+                leftEmptySpace +=
                     Math.max((emptyHSpace - extraHSpacing) / 2, 0);
             }
             break;
@@ -628,19 +638,17 @@ var IconGridLayout = GObject.registerClass({
 
         switch (this._pageVAlign) {
         case Clutter.ActorAlign.START:
-            topEmptySpace = 0;
             vSpacing = this._rowSpacing;
             break;
         case Clutter.ActorAlign.CENTER:
-            topEmptySpace = Math.floor(emptyVSpace / 2);
+            topEmptySpace += Math.floor(emptyVSpace / 2);
             vSpacing = this._rowSpacing;
             break;
         case Clutter.ActorAlign.END:
-            topEmptySpace = emptyVSpace;
+            topEmptySpace += emptyVSpace;
             vSpacing = this._rowSpacing;
             break;
         case Clutter.ActorAlign.FILL:
-            topEmptySpace = 0;
             vSpacing = this._rowSpacing + emptyVSpace / (nRows - 1);
 
             // Maybe constraint vertical spacing
@@ -649,7 +657,7 @@ var IconGridLayout = GObject.registerClass({
                     (this._maxRowSpacing - this._rowSpacing) * (nRows - 1);
 
                 vSpacing = this._maxRowSpacing;
-                topEmptySpace =
+                topEmptySpace +=
                     Math.max((emptyVSpace - extraVSpacing) / 2, 0);
             }
 
@@ -1201,6 +1209,23 @@ var IconGridLayout = GObject.registerClass({
         this.notify('page-halign');
     }
 
+    // eslint-disable-next-line camelcase
+    get page_padding() {
+        return this._pagePadding;
+    }
+
+    // eslint-disable-next-line camelcase
+    set page_padding(padding) {
+        if (this._pagePadding.top === padding.top &&
+            this._pagePadding.right === padding.right &&
+            this._pagePadding.bottom === padding.bottom &&
+            this._pagePadding.left === padding.left)
+            return;
+
+        this._pagePadding = padding;
+        this.notify('page-padding');
+    }
+
     // eslint-disable-next-line camelcase
     get page_valign() {
         return this._pageVAlign;
@@ -1368,6 +1393,10 @@ var IconGrid = GObject.registerClass({
     }
 
     _findBestModeForSize(width, height) {
+        const { pagePadding } = this.layout_manager;
+        width -= pagePadding.left + pagePadding.right;
+        height -= pagePadding.top + pagePadding.bottom;
+
         const sizeRatio = width / height;
         let closestRatio = Infinity;
         let bestMode = -1;